<template>
  <section>
    <van-sticky>
      <PageHeader title="会员管理" />
    </van-sticky>

    <van-form @submit="onFormSubmit">
      <van-cell-group title="基本信息">
        <div class="pd10 text-center bg-color-white">
          <van-uploader name="user_avatar" :before-read="beforeUploadRead" :after-read="afterUploadRead">
            <img :src="user.avatar_url ? user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="user-avatar" />
          </van-uploader>
        </div>

        <van-field
          v-model="user.nick"
          name="nick"
          label="用户名"
          placeholder="请填写用户名"
          :readonly="$route.name == 'MemberEditForm'"
          required
          :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <van-field
          v-model="user.mobile"
          name="mobile"
          label="手机号"
          placeholder="请填写手机号"
          :readonly="$route.name == 'MemberEditForm'"
        />

        <van-field
          v-model="user.password"
          name="password"
          label="密码"
          placeholder="请填写密码"
          v-if="$route.name == 'MemberAddForm'"
        />
      </van-cell-group>

      <van-cell-group title="个人资料">
        <van-cell title="性别"
                  :value="member.gender>0 ? member.gender_str : ''"
                  is-link
                  @click="showGenderSheet"/>
        <van-cell title="生日"
                  :value="member.birthday|timeFormat('yyyy-MM-dd')"
                  is-link
                  @click="birthdayCalendarVisible=true"  />
        <van-field
          v-model="member.wxid"
          label="微信号"
          placeholder="请填写微信号" />

        <van-cell title="所在地" :value="member.live_city_str" is-link @click="onShowRegionPopup('live')"/>
        <van-cell title="户籍地" :value="member.birth_city_str" is-link @click="onShowRegionPopup('birth')" />
        <van-cell title="婚姻状况" :value="member.marriage_status_str" is-link @click="marriageStatusSheetVisible=true" />
        <van-cell title="身高" :value="member.height > 0 ? member.height + 'cm' : ''" is-link @click="heightSheetVisible=true" />
        <van-cell title="体重" :value="member.weight > 0 ? member.weight + 'KG' : ''" is-link @click="weightSheetVisible=true" />
        <van-cell title="学历" :value="member.education > 0 ? member.education_str : ''" is-link @click="educationTypesSheetVisible=true" />

        <van-field
          v-model="member.graduate_institutions"
          label="毕业院校"
          placeholder="请填写毕业院校" />

        <van-cell title="职业" :value="member.job > 0 ? member.job_str : ''" is-link @click="jobsSheetVisible=true" />
        <van-cell title="单位性质" :value="member.job_type > 0 ? member.job_type_str : ''" is-link @click="jobTypesVisible=true" />
        <van-cell title="年收入" :value="member.annual_income > 0 ? member.annual_income_str : ''" is-link @click="incomesSheetVisible=true" />

        <van-cell title="房产"
                  :value="member.house_status > 0 ? member.house_status_str : ''"
                  is-link
                  @click="houseStatusSheetVisible=true" />
        <van-cell title="房产所在地" :value="member.house_location_str" is-link @click="onShowRegionPopup('house_location')" v-if="member.house_status == 20"/>

        <van-cell title="车子" :value="member.car_status > 0 ? member.car_status_str : ''" is-link @click="carStatusSheetVisible=true" />
        <van-cell title="小孩情况" :value="member.kids > 0 ? member.kids_str : ''" is-link @click="kidsSheetVisible=true" />
        <van-cell title="血型" :value="member.blood_type > 0 ? member.blood_type_str : ''" is-link @click="bloodTypesSheetVisible=true" />
        <van-cell title="民族" :value="member.nation > 0 ? member.nation_str : ''" is-link @click="nationsSheetVisible=true" />
      </van-cell-group>

      <van-cell-group title="个人&家庭">
        <van-cell title="宗教信仰" :value="member.faith > 0 ? member.faith_str : ''" is-link @click="faithsSheetVisible=true" />
        <van-cell title="吸烟" :value="member.smoke_status > 0 ? member.smoke_status_str : ''" is-link @click="smokesSheetVisible=true" />
        <van-cell title="喝酒" :value="member.drink_status > 0 ? member.drink_status_str : ''" is-link @click="drinksSheetVisible=true" />
      </van-cell-group>

      <van-cell-group title="婚姻规划">
        <van-cell title="异地恋" :value="member.distance_relationship_type > 0 ? member.distance_relationship_type_str : ''" is-link @click="distanceRelationshipTypesVisible=true" />
        <van-cell title="是否要小孩" :value="member.child_type > 0 ? member.child_type_str : ''" is-link @click="childTypesVisible=true" />
        <van-cell title="愿与对方父母同住" :value="member.live_parents_type > 0 ? member.live_parents_type_str : ''" is-link @click="liveParentsTypesVisible=true" />
      </van-cell-group>

      <van-cell-group title="择偶要求">
        <van-cell title="年龄"
                  :value="(member.expect_age_from > 0 ? member.expect_age_from + '岁-' : '不限-') + (member.expect_age_to > 0 ? member.expect_age_to + '岁' : '不限')"
                  is-link
                  @click="agePopupVisible=true" />
        <van-cell title="身高"
                  :value="(member.expect_height_from > 0 ? member.expect_height_from + 'CM-' : '不限-') + (member.expect_height_to > 0 ? member.expect_height_to + 'CM' : '不限')"
                  is-link
                  @click="heightPopupVisible=true" />
        <van-cell title="体重"
                  :value="(member.expect_weight_from > 0 ? member.expect_weight_from + 'KG-' : '不限-') + (member.expect_weight_to > 0 ? member.expect_weight_to + 'KG' : '不限')"
                  is-link
                  @click="weightPopupVisible=true" />
        <van-cell title="婚姻状况"
                  :value="member.expect_marriage_status_str_label"
                  is-link
                  @click="expectMarriageStatusPopupVisible=true" />
        <van-cell title="学历"
                  :value="member.expect_education_type_str"
                  is-link
                  @click="expectEducationTypesSheetVisible=true" />
        <van-cell title="收入"
                  :value="member.expect_income_type_str"
                  is-link
                  @click="expectIncomesSheetVisible=true" />

        <van-cell title="有房">
          <template #right-icon>
            <van-switch v-model="member.expect_house_status" size="24" :active-value="20" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="房产所在地" :value="member.expect_house_location_str" is-link @click="onShowRegionPopup('expect_house_location')" v-if="member.expect_house_status == 20"/>

        <van-cell title="购车"
                  :value="member.expect_car_status_str"
                  is-link
                  @click="expectCarStatusSheetVisible=true" />
        <van-cell title="小孩情况"
                  :value="member.expect_kids_status_str"
                  is-link
                  @click="expectKidsSheetVisible=true" />

        <van-cell title="完成诚信认证">
          <template #right-icon>
            <van-switch v-model="member.expect_verify_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="所在地区"
                  :value="member.expect_location_str"
                  is-link
                  @click="onShowRegionPopup('expect_live')" />
      </van-cell-group>

      <van-cell-group title="形象照">
        <div class="pd10 text-center bg-color-white">
          <van-uploader name="member_photo" :before-read="beforeUploadRead" :after-read="afterUploadRead">
            <img :src="member.photo_url ? member.photo_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="member-photo" />
          </van-uploader>
        </div>
      </van-cell-group>

      <van-cell-group title="其它">
        <van-field
          v-model="member.intro"
          name="intro"
          label="个人简介"
          placeholder="请填写个人简介"
          type="textarea"
          :rows="6"
        />

        <van-field
          v-model="member.likes"
          name="likes"
          label="人气"
          placeholder="请填写人气值"
          type="digit"
        />

        <van-cell title="查看手机号审核">
          <template #right-icon>
            <van-switch v-model="member.phone_audit_enable" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="查看微信审核">
          <template #right-icon>
            <van-switch v-model="member.wxid_audit_enable" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="征婚状态">
          <template #right-icon>
            <van-switch v-model="member.marriage_seeking_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="隐藏手机号">
          <template #right-icon>
            <van-switch v-model="member.hidden_mobile_enable" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

      </van-cell-group>

      <van-cell-group title="会员权益">
        <van-field
          v-model="member.wxid_view_amount"
          name="wxid_view_amount"
          label="查看微信号"
          placeholder="请填写免费查看微信号次数"
          type="digit"
        />

        <van-field
          v-model="member.phone_view_amount"
          name="phone_view_amount"
          label="查看手机号"
          placeholder="请填写免费查看手机号的次数"
          type="digit"
        />

        <van-field
          v-model="member.send_msg_amount"
          name="send_msg_amount"
          label="发私信"
          placeholder="请填写免费发私信的次数"
          type="digit"
        />

        <van-field
          v-model="member.read_msg_amount"
          name="wxid_view_amount"
          label="解锁私信"
          placeholder="请填写免费解锁私信的次数"
          type="digit"
        />

        <van-field
          v-model="member.join_offline_activity_amount"
          name="join_offline_activity_amount"
          label="参加线下活动"
          placeholder="请填写免费参加线下活动的次数"
          type="digit"
        />

        <van-field
          v-model="member.mp_recommend_amount"
          name="mp_recommend_amount"
          label="公众号推荐"
          placeholder="请填写免费在公众号推荐的次数"
          type="digit"
        />

        <van-field
          v-model="member.live_video_recommend_amount"
          name="live_video_recommend_amount"
          label="直播间推荐"
          placeholder="请填写免费在直播间推荐的次数"
          type="digit"
        />
      </van-cell-group>

      <van-cell-group title="认证">
        <van-cell title="实名认证">
          <template #right-icon>
            <van-switch v-model="member.realname_auth_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="学历认证">
          <template #right-icon>
            <van-switch v-model="member.education_auth_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="婚姻认证">
          <template #right-icon>
            <van-switch v-model="member.marriage_auth_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="房产认证">
          <template #right-icon>
            <van-switch v-model="member.house_auth_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="车子认证">
          <template #right-icon>
            <van-switch v-model="member.car_auth_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>

        <van-cell title="微信号认证">
          <template #right-icon>
            <van-switch v-model="member.wxid_auth_status" size="24" :active-value="1" :inactive-value="0" />
          </template>
        </van-cell>
      </van-cell-group>

      <div class="pd10">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

    <van-action-sheet
      v-model="genderSheetVisible"
      :actions="genderActions"
      cancel-text="取消"
      description="性别"
      close-on-click-action
      @select="onGenderActionsSelect"
    />

    <van-popup v-model="birthdayCalendarVisible" round position="bottom">
      <van-datetime-picker
        v-model="defaultBirthDate"
        type="date"
        title="选择年月日"
        :min-date="minBirthDate"
        @confirm="onBirthdayCalendarConfirm"
      />
    </van-popup>

    <van-popup v-model="showRegionPopup" round position="bottom">
      <van-cascader
        v-model="selectedRegions"
        title="请选择所在地区"
        :options="provinceList"
        @close="showRegionPopup = false"
        @change="onRegionCascaderChange"
        @finish="onRegionCascaderFinish"
      />
    </van-popup>

    <van-action-sheet
      v-model="marriageStatusSheetVisible"
      :actions="marriageStatusActions"
      cancel-text="取消"
      description="婚姻状况"
      close-on-click-action
      @select="onMarriageStatusActionsSelect"
    />

    <van-action-sheet
      v-model="heightSheetVisible"
      :actions="heightActions"
      cancel-text="取消"
      description="身高"
      close-on-click-action
      @select="onHeightActionsSelect"
    />

    <van-action-sheet
      v-model="weightSheetVisible"
      :actions="weightActions"
      cancel-text="取消"
      description="体重"
      close-on-click-action
      @select="onWeightActionsSelect"
    />

    <van-action-sheet
      v-model="educationTypesSheetVisible"
      :actions="educationTypesActions"
      cancel-text="取消"
      description="学历"
      close-on-click-action
      @select="onEducationTypesActionsSelect"
    />

    <van-action-sheet
      v-model="jobsSheetVisible"
      :actions="jobsActions"
      cancel-text="取消"
      description="职业"
      close-on-click-action
      @select="onJobActionsSelect"
    />

    <van-action-sheet
      v-model="incomesSheetVisible"
      :actions="incomesActions"
      cancel-text="取消"
      description="年收入"
      close-on-click-action
      @select="onIncomesActionsSelect"
    />

    <van-action-sheet
      v-model="carStatusSheetVisible"
      :actions="carStatusActions"
      cancel-text="取消"
      description="购车情况"
      close-on-click-action
      @select="onCarStatusActionsSelect"
    />

    <van-action-sheet
      v-model="kidsSheetVisible"
      :actions="kidsActions"
      cancel-text="取消"
      description="孩子情况"
      close-on-click-action
      @select="onKidsActionsSelect"
    />

    <van-action-sheet
      v-model="bloodTypesSheetVisible"
      :actions="bloodTypesActions"
      cancel-text="取消"
      description="血型"
      close-on-click-action
      @select="onBloodTypeActionsSelect"
    />

    <van-action-sheet
      v-model="nationsSheetVisible"
      :actions="nationsActions"
      cancel-text="取消"
      description="民族"
      close-on-click-action
      @select="onNationsActionsSelect"
    />

    <van-action-sheet
      v-model="faithsSheetVisible"
      :actions="faithsActions"
      cancel-text="取消"
      description="宗教信仰"
      close-on-click-action
      @select="onFaithsActionsSelect"
    />

    <van-action-sheet
      v-model="smokesSheetVisible"
      :actions="smokesActions"
      cancel-text="取消"
      description="吸烟"
      close-on-click-action
      @select="onSmokesActionsSelect"
    />

    <van-action-sheet
      v-model="drinksSheetVisible"
      :actions="drinksActions"
      cancel-text="取消"
      description="喝酒"
      close-on-click-action
      @select="onDrinksActionsSelect"
    />

    <van-action-sheet
      v-model="jobTypesVisible"
      :actions="jobTypesActions"
      cancel-text="取消"
      description="单位性质"
      close-on-click-action
      @select="onJobTypesActionsSelect"
    />

    <van-action-sheet
      v-model="distanceRelationshipTypesVisible"
      :actions="distanceRelationshipTypesActions"
      cancel-text="取消"
      description="异地恋"
      close-on-click-action
      @select="onDistanceRelationshipTypesActionsSelect"
    />

    <van-action-sheet
      v-model="childTypesVisible"
      :actions="childTypesActions"
      cancel-text="取消"
      description="要小孩"
      close-on-click-action
      @select="onChildTypesActionsSelect"
    />

    <van-action-sheet
      v-model="liveParentsTypesVisible"
      :actions="liveParentsTypesActions"
      cancel-text="取消"
      description="与对方父母同住"
      close-on-click-action
      @select="onLiveParentsTypesActionsSelect"
    />

    <van-action-sheet
      v-model="houseStatusSheetVisible"
      :actions="houseStatusActions"
      cancel-text="取消"
      description="房产情况"
      close-on-click-action
      @select="onHouseStatusActionsSelect"
    />

    <van-popup v-model="agePopupVisible" position="bottom">
      <van-picker show-toolbar title="年龄" :columns="ageColumns" @confirm="onAgePopupConfirm" @cancel="onAgePopupCancel" />
    </van-popup>

    <van-popup v-model="heightPopupVisible" position="bottom">
      <van-picker show-toolbar title="身高" :columns="heightColumns" @confirm="onHeightPopupConfirm" @cancel="onHeightPopupCancel" />
    </van-popup>

    <van-popup v-model="weightPopupVisible" position="bottom">
      <van-picker show-toolbar title="体重" :columns="weightColumns" @confirm="onWeightPopupConfirm" @cancel="onWeightPopupCancel" />
    </van-popup>

    <van-popup v-model="expectMarriageStatusPopupVisible" position="bottom">
      <div class="text-center font-big strong pt20">
        婚姻状况
      </div>
      <div class="text-center pd20 font-common">
        <van-checkbox-group v-model="member.expect_marriage_status" direction="horizontal">
          <van-checkbox :name="item.value" shape="square" v-for="(item, index) in marriageStatusActions" :key="index">{{item.name}}</van-checkbox>
        </van-checkbox-group>
      </div>

      <div class="text-center pb20 pl20 pr20">
        <van-button round block type="primary" @click="onExpectMarriageStatusConfirm">确定</van-button>
      </div>
    </van-popup>

    <van-action-sheet
      v-model="expectEducationTypesSheetVisible"
      :actions="educationTypesActions"
      cancel-text="取消"
      description="最低学历要求"
      close-on-click-action
      @select="onExpectEducationTypesActionsSelect"
    />

    <van-action-sheet
      v-model="expectIncomesSheetVisible"
      :actions="incomesActions"
      cancel-text="取消"
      description="最低收入要求"
      close-on-click-action
      @select="onExpectIncomesActionsSelect"
    />

    <van-action-sheet
      v-model="expectKidsSheetVisible"
      :actions="kidsActions"
      cancel-text="取消"
      description="孩子情况"
      close-on-click-action
      @select="onExpectKidsActionsSelect"
    />

    <van-action-sheet
      v-model="expectCarStatusSheetVisible"
      :actions="carStatusActions"
      cancel-text="取消"
      description="购车情况"
      close-on-click-action
      @select="onExpectCarStatusActionsSelect"
    />

    <van-action-sheet
      v-model="expectHouseStatusSheetVisible"
      :actions="houseStatusActions"
      cancel-text="取消"
      description="房产情况"
      close-on-click-action
      @select="onExpectHouseStatusActionsSelect"
    />
  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import {
  advInfoUri,
  advSaveUri,
  BASE_STATIC_URL,
  fileUploadByBase64Uri,
  memberConstantsUri, memberInfoUri, memberSaveUri,
  regionChildrenUri
} from "../../common/api";
import {Toast} from "vant";

let ages = [];
ages.push(0);
for (let i = 20; i <= 70; i++) {
  ages.push(i);
}

let heights = [];
heights.push(0);
for (let i = 145; i <= 220; i++) {
  heights.push(i);
}

let weights = [];
weights.push(0);
for (let i = 35; i <= 110; i++) {
  weights.push(i);
}

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      BASE_STATIC_URL: BASE_STATIC_URL,
      user: {id: 0, nick: '', mobile: '', password: '', avatar: '', avatar_url: ''},
      member: {id: 0, user_id: 0, gender: 0, gender_str: '', birthday: 0, constellation: -1, zodiac: -1, photo: '', photo_url: '',
        marriage_status: 0, marriage_status_str: '', job: 0, job_str: '', live_province: 0, live_city: 0, live_city_str: '',
        birth_province : 0, birth_city: 0, birth_city_str: '', graduate_institutions: '',
        height: 0, weight: 0, education: 0, education_str: '', annual_income: 0, annual_income_str: '', house_status: 0,
        house_status_str: '', house_location: 0, house_location_str: '',
        car_status: 0, car_status_str: '', kids: 0, kids_str: '', nation: 0, nation_str: '', blood_type: 0, blood_type_str: '', hobbies: '',
        intro: '', faith: 0, faith_str: '',
        smoke_status: 0, smoke_status_str: '', drink_status: 0, drink_status_str: '', job_type: 0, job_type_str: '',
        family_rank: 0, distance_relationship_type: 0, distance_relationship_type_str: '',
        child_type: 0, child_type_str: '', live_parents_type: 0, live_parents_type_str: '', expect_age_from: 0, expect_age_to: 0,
        expect_height_from: 0, expect_height_to: 0, expect_weight_from: 0, expect_weight_to: 0,
        expect_location: 0, expect_location_str: '', expect_marriage_status: [], expect_marriage_status_str_label: '',
        expect_house_status: 0, expect_house_status_str: '', expect_house_location: 0, expect_house_location_str: '',
        expect_car_status: 0, expect_car_status_str: '', expect_kids_status: 0, expect_kids_status_str: '',
        expect_education_type: 0, expect_education_type_str: '',
        expect_income_type: 0, expect_income_type_str: '',
        expect_verify_status: 0, expect_verify_status_str: '', likes: 0, wxid: '', wxid_auth_status : 0, realname_auth_status: 0,
        marriage_auth_status: 0, education_auth_status: 0, house_auth_status: 0, car_auth_status: 0,
        hidden_mobile_enable: 0, phone_audit_enable: 1, wxid_audit_enable: 1, marriage_seeking_status: 1,
        wxid_view_amount: 0, phone_view_amount: 0, send_msg_amount: 0, read_msg_amount: 0, join_offline_activity_amount: 0,
        mp_recommend_amount: 0, live_video_recommend_amount: 0},

      genderSheetVisible: false,
      genderActions: [],
      birthdayCalendarVisible: false,
      minBirthDate: new Date(1900, 0, 1),
      maxBirthDate: new Date(),
      defaultBirthDate: new Date(1990, 0, 1),
      showRegionPopup: false,
      selectedRegions: '',
      provinceList: [],
      cityList: [],
      regionPopupType: '',
      marriageStatusSheetVisible: false,
      marriageStatusActions: [],
      heightSheetVisible: false,
      heightActions: [],
      weightSheetVisible: false,
      weightActions: [],
      educationTypesSheetVisible: false,
      educationTypesActions: [],
      jobsSheetVisible: false,
      jobsActions: [],
      incomesSheetVisible: false,
      incomesActions: [],
      carStatusSheetVisible: false,
      carStatusActions: [],
      kidsSheetVisible: false,
      kidsActions: [],
      bloodTypesSheetVisible: false,
      bloodTypesActions: [],
      nationsSheetVisible: false,
      nationsActions: [],
      faithsSheetVisible: false,
      faithsActions: [],
      smokesSheetVisible: false,
      smokesActions: [],
      drinksSheetVisible: false,
      drinksActions: [],
      jobTypesVisible: false,
      jobTypesActions: [],
      distanceRelationshipTypesVisible: false,
      distanceRelationshipTypesActions: [],
      childTypesVisible: false,
      childTypesActions: [],
      liveParentsTypesVisible: false,
      liveParentsTypesActions: [],
      houseStatusSheetVisible: false,
      houseStatusActions: [],

      expectHouseStatusSheetVisible: false,
      expectMarriageStatusPopupVisible: false,
      agePopupVisible: false,
      ageColumns: [],
      heightPopupVisible: false,
      heightColumns: [],
      weightPopupVisible: false,
      weightColumns: [],
      marriageStatusPopupVisible: false,
      expectEducationTypesSheetVisible: false,
      expectEducationTypesActions: [],
      expectIncomesSheetVisible: false,
      expectIncomesActions: [],
      expectCarStatusSheetVisible: false,
      expectCarStatusActions: [],
      expectKidsSheetVisible: false,
      expectKidsActions: [],
      expectChildTypesVisible: false,
      expectChildTypesActions: [],
      verifyStatusVisible: false,
      verifyStatusActions: [
        {
          name: '不限',
          value: 0
        },
        {
          name: '已认证',
          value: 1
        }
      ],
    }
  },
  methods: {
    beforeUploadRead(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.toast('请上传 jpg/png 格式图片');
        return false;
      }
      return true;
    },
    afterUploadRead(file, extra) {
      file.status = 'uploading';
      file.message = '上传中...';

      const that = this;
      that.$http.post(fileUploadByBase64Uri, {
        fileData: file.content,
        upload_token: that.GLOBAL.userInfo.upload_token
      }, {emulateJSON: true}).then(response => {
        let {msg, code, file_id, url} = response.body;
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          if(extra.name == 'user_avatar') {
            that.user.avatar = file_id;
            that.user.avatar_url = url;
          } else if(extra.name == 'member_photo') {
            that.member.photo = file_id;
            that.member.photo_url = url;
          }
          file.status = 'done';
          file.message = '';
        }
      }, response => {
        that.toast.fail('发生错误');
      })
    },
    onFormSubmit(values) {
      if(this.user.avatar == '') {
        this.toast('请上传头像');
        return;
      }

      if(this.member.photo == '') {
        this.toast('请上传形象照');
        return;
      }

      const postData = {
        user: JSON.stringify(this.user),
        member: JSON.stringify(this.member),
      };
      const that = this;
      that.$http.post(memberSaveUri, postData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.toast('保存成功');
          that.$router.back();
        }
      }, response => {
        Toast.fail('发生错误')
      })
    },
    showGenderSheet() {
      this.genderSheetVisible = true;
    },
    onGenderActionsSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.genderSheetVisible = false;
      this.member.gender = item.value;
      this.member.gender_str = item.name;
    },
    onMarriageStatusActionsSelect(item) {
      this.marriageStatusSheetVisible = false;
      this.member.marriage_status = item.value;
      this.member.marriage_status_str = item.name;
    },
    onHeightActionsSelect(item) {
      this.heightSheetVisible = false;
      this.member.height = item.value;
    },
    onWeightActionsSelect(item) {
      this.weightSheetVisible = false;
      this.member.weight = item.value;
    },
    onEducationTypesActionsSelect(item) {
      this.educationTypesSheetVisible = false;
      this.member.education = item.value;
      this.member.education_str = item.name;
    },
    onJobActionsSelect(item) {
      this.jobsSheetVisible = false;
      this.member.job = item.value;
      this.member.job_str = item.name;
    },
    onIncomesActionsSelect(item) {
      this.incomesSheetVisible = false;
      this.member.annual_income = item.value;
      this.member.annual_income_str = item.name;
    },
    onCarStatusActionsSelect(item) {
      this.carStatusSheetVisible = false;
      this.member.car_status = item.value;
      this.member.car_status_str = item.name;
    },
    onKidsActionsSelect(item) {
      this.kidsSheetVisible = false;
      this.member.kids = item.value;
      this.member.kids_str = item.name;
    },
    onBloodTypeActionsSelect(item) {
      this.bloodTypesSheetVisible = false;
      this.member.blood_type = item.value;
      this.member.blood_type_str = item.name;
    },
    onNationsActionsSelect(item) {
      this.nationsSheetVisible = false;
      this.member.nation = item.value;
      this.member.nation_str = item.name;
    },
    onFaithsActionsSelect(item) {
      this.faithsSheetVisible = false;
      this.member.faith = item.value;
      this.member.faith_str = item.name;
    },
    onSmokesActionsSelect(item) {
      this.smokesSheetVisible = false;
      this.member.smoke_status = item.value;
      this.member.smoke_status_str = item.name;
    },
    onDrinksActionsSelect(item) {
      this.drinksSheetVisible = false;
      this.member.drink_status = item.value;
      this.member.drink_status_str = item.name;
    },
    onJobTypesActionsSelect(item) {
      this.jobsSheetVisible = false;
      this.member.job_type = item.value;
      this.member.job_type_str = item.name;
    },
    onDistanceRelationshipTypesActionsSelect(item) {
      this.distanceRelationshipTypesVisible = false;
      this.member.distance_relationship_type = item.value;
      this.member.distance_relationship_type_str = item.name;
    },
    onChildTypesActionsSelect(item) {
      this.childTypesVisible = false;
      this.member.child_type = item.value;
      this.member.child_type_str = item.name;
    },
    onLiveParentsTypesActionsSelect(item) {
      this.liveParentsTypesVisible = false;
      this.member.live_parents_type = item.value;
      this.member.live_parents_type_str = item.name;
    },
    onBirthdayCalendarConfirm(date) {
      this.birthdayCalendarVisible = false;
      this.member.birthday = date.getTime() / 1000;
    },
    onHouseStatusActionsSelect(item) {
      this.houseStatusSheetVisible = false;
      this.member.house_status = item.value;
      this.member.house_status_str = item.name;
    },
    onExpectHouseStatusActionsSelect(item) {
      this.expectHouseStatusSheetVisible = false;
      this.member.expect_house_status = item.value;
      this.member.expect_house_status_str = item.name;
    },
    getRegions(parentId, callback) {
      const that = this;
      const url = regionChildrenUri + '?parent_id=' + parentId;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          callback(data.regions);
        }
      }, response => {
        // error callback
      })
    },
    onRegionCascaderChange(option) {
      const tabIndex = option.tabIndex;
      const value = option.value;
      if(tabIndex == 0) {
        if(value > 0) {
          const provinceList = this.provinceList;
          let provinceIndex = 0;
          for (let i = 0; i < provinceList.length; i++) {
            if(value == provinceList[i].value) {
              provinceIndex = i;
              break;
            }
          }
          this.getRegions(value, (regions) => {
            let children = [];
            children.push({
              text: '不限',
              value: 0
            });
            for (let i = 0; i < regions.length; i++) {
              children.push({
                text: regions[i].region_name,
                value: regions[i].region_id
              })
            }
            let province = provinceList[provinceIndex];
            province.children = children;
            this.$set(provinceList, provinceIndex, province);
          })
        } else {
          let children = [];
          children.push({
            text: '不限',
            value: 0
          });
          const provinceList = this.provinceList;
          let provinceIndex = 0;
          let province = provinceList[provinceIndex];
          province.children = children;
          this.$set(provinceList, provinceIndex, province);
        }
      }
    },
    onRegionCascaderFinish({ selectedOptions }) {
      if(this.regionPopupType == 'birth') {
        this.member.birth_city_str = selectedOptions[0].text + '-' + selectedOptions[1].text;
        this.member.birth_province = selectedOptions[0].value;
        this.member.birth_city = selectedOptions[1].value;
      } else if(this.regionPopupType == 'live') {
        this.member.live_city_str = selectedOptions[0].text + '-' + selectedOptions[1].text;
        this.member.live_province = selectedOptions[0].value;
        this.member.live_city = selectedOptions[1].value;
      } else if(this.regionPopupType == 'house_location') {
        this.member.house_location_str = selectedOptions[0].text + '-' + selectedOptions[1].text;
        this.member.house_location = selectedOptions[1].value;
      } else if(this.regionPopupType == 'expect_live') {
        this.member.expect_location_str = selectedOptions[0].text + '-' + selectedOptions[1].text;
        this.member.expect_location = selectedOptions[1].value;
      } else if(this.regionPopupType == 'expect_house_location') {
        this.member.expect_house_location_str = selectedOptions[0].text + '-' + selectedOptions[1].text;
        this.member.expect_house_location = selectedOptions[1].value;
      }
      this.showRegionPopup = false;
    },
    onShowRegionPopup(type) {
      this.regionPopupType = type;
      this.showRegionPopup = true;
    },
    getConstants() {
      const that = this;
      const url = memberConstantsUri;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          let genderActions = [];
          for (let key in data.genders) {
            genderActions.push({
              name: data.genders[key],
              value: key
            })
          }
          that.genderActions = genderActions;

          let marriageStatusActions = [];
          for (let key in data.marriage_status) {
            marriageStatusActions.push({
              name: data.marriage_status[key],
              value: key
            })
          }
          that.marriageStatusActions = marriageStatusActions;

          let heightActions = [];
          for (let i = 130; i < 220; i++) {
            heightActions.push({
              name: i + 'CM',
              value: i
            })
          }
          that.heightActions = heightActions;

          let weightActions = [];
          for (let i = 35; i < 120; i++) {
            weightActions.push({
              name: i + 'KG',
              value: i
            })
          }
          that.weightActions = weightActions;

          let educationTypesActions = [];
          for (let key in data.education_types) {
            educationTypesActions.push({
              name: data.education_types[key],
              value: key
            })
          }
          that.educationTypesActions = educationTypesActions;

          let jobsActions = [];
          for (let key in data.jobs) {
            jobsActions.push({
              name: data.jobs[key],
              value: key
            })
          }
          that.jobsActions = jobsActions;

          let incomesActions = [];
          for (let key in data.incomes) {
            incomesActions.push({
              name: data.incomes[key],
              value: key
            })
          }
          that.incomesActions = incomesActions;

          let carStatusActions = [];
          for (let key in data.car_status) {
            carStatusActions.push({
              name: data.car_status[key],
              value: key
            })
          }
          that.carStatusActions = carStatusActions;

          let kidsActions = [];
          for (let key in data.kids) {
            kidsActions.push({
              name: data.kids[key],
              value: key
            })
          }
          that.kidsActions = kidsActions;

          let bloodTypesActions = [];
          for (let key in data.blood_types) {
            bloodTypesActions.push({
              name: data.blood_types[key],
              value: key
            })
          }
          that.bloodTypesActions = bloodTypesActions;

          let nationsActions = [];
          for (let key in data.nations) {
            nationsActions.push({
              name: data.nations[key],
              value: key
            })
          }
          that.nationsActions = nationsActions;

          let faithsActions = [];
          for (let key in data.faiths) {
            faithsActions.push({
              name: data.faiths[key],
              value: key
            })
          }
          that.faithsActions = faithsActions;

          let smokesActions = [];
          for (let key in data.smokes) {
            smokesActions.push({
              name: data.smokes[key],
              value: key
            })
          }
          that.smokesActions = smokesActions;

          let drinksActions = [];
          for (let key in data.drinks) {
            drinksActions.push({
              name: data.drinks[key],
              value: key
            })
          }
          that.drinksActions = drinksActions;

          let jobTypesActions = [];
          for (let key in data.job_types) {
            jobTypesActions.push({
              name: data.job_types[key],
              value: key
            })
          }
          that.jobTypesActions = jobTypesActions;

          let distanceRelationshipTypesActions = [];
          for (let key in data.distance_relationship_types) {
            distanceRelationshipTypesActions.push({
              name: data.distance_relationship_types[key],
              value: key
            })
          }
          that.distanceRelationshipTypesActions = distanceRelationshipTypesActions;

          let childTypesActions = [];
          for (let key in data.child_types) {
            childTypesActions.push({
              name: data.child_types[key],
              value: key
            })
          }
          that.childTypesActions = childTypesActions;

          let liveParentsTypesActions = [];
          for (let key in data.live_parents_types) {
            liveParentsTypesActions.push({
              name: data.live_parents_types[key],
              value: key
            })
          }
          that.liveParentsTypesActions = liveParentsTypesActions;

          let houseStatusActions = [];
          for (let key in data.house_status) {
            houseStatusActions.push({
              name: data.house_status[key],
              value: key
            });
          }
          that.houseStatusActions = houseStatusActions;

        }
      }, response => {
        // error callback
      })
    },
    onAgePopupCancel() {
      this.agePopupVisible = false;
    },
    onAgePopupConfirm(value, index) {
      this.member.expect_age_from = ages[index[0]];
      this.member.expect_age_to = ages[index[1]];
      this.agePopupVisible = false;
    },
    onHeightPopupCancel() {
      this.heightPopupVisible = false;
    },
    onHeightPopupConfirm(value, index) {
      this.member.expect_height_from = heights[index[0]];
      this.member.expect_height_to = heights[index[1]];
      this.heightPopupVisible = false;
    },
    onWeightPopupCancel() {
      this.weightPopupVisible = false;
    },
    onWeightPopupConfirm(value, index) {
      this.member.expect_weight_from = weights[index[0]];
      this.member.expect_weight_to = weights[index[1]];
      this.weightPopupVisible = false;
    },
    onExpectMarriageStatusConfirm() {
      this.expectMarriageStatusPopupVisible = false;
      let str = [];
      for(let k = 0; k < this.member.expect_marriage_status.length; k++) {
        for (let i = 0; i < this.marriageStatusActions.length; i++) {
          if(this.member.expect_marriage_status[k] == this.marriageStatusActions[i].value) {
            str.push(this.marriageStatusActions[i].name);
            break;
          }
        }
      }
      this.member.expect_marriage_status_str_label = str.join('、');
    },
    onExpectEducationTypesActionsSelect(item) {
      this.expectEducationTypesSheetVisible = false;
      this.member.expect_education_type = item.value;
      this.member.expect_education_type_str = item.name;
    },
    onExpectIncomesActionsSelect(item) {
      this.expectIncomesSheetVisible = false;
      this.member.expect_income_type = item.value;
      this.member.expect_income_type_str = item.name;
    },
    onExpectCarStatusActionsSelect(item) {
      this.expectCarStatusSheetVisible = false;
      this.member.expect_car_status = item.value;
      this.member.expect_car_status_str = item.name;
    },
    onExpectKidsActionsSelect(item) {
      this.expectKidsSheetVisible = false;
      this.member.expect_kids_status = item.value;
      this.member.expect_kids_status_str = item.name;
    },
    getInfo() {
      const that = this;
      this.$http.get(memberInfoUri + '?profile_id=' + this.$route.params.profile_id).then(response => {
        let {code, msg, data} = response.body;
        if (code != 0) {
          that.toast(msg);
        } else {
          that.user = data.user;
          for(let key in that.member) {
            if(typeof data.member[key] != "undefined") {
              that.member[key] = data.member[key];
            }
          }
          that.member.expect_marriage_status_str_label = data.member.expect_marriage_status_str.join('、');
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    let ageValuess = [];
    ageValuess.push('不限');
    for (let i = 1; i < ages.length; i++) {
      ageValuess.push(ages[i] + '岁');
    }
    this.ageColumns = [
      {values: ageValuess, defaultIndex: 0},
      {values: ageValuess, defaultIndex: 0}
    ];

    let heightValuess = [];
    heightValuess.push('不限');
    for (let i = 1; i < heights.length; i++) {
      heightValuess.push(heights[i] + 'CM');
    }
    this.heightColumns = [
      {values: heightValuess, defaultIndex: 0},
      {values: heightValuess, defaultIndex: 0}
    ];

    let weightValues = [];
    weightValues.push('不限');
    for (let i = 1; i < weights.length; i++) {
      weightValues.push(weights[i] + 'KG');
    }
    this.weightColumns = [
      {values: weightValues, defaultIndex: 0},
      {values: weightValues, defaultIndex: 0}
    ];

    if(this.$route.name == 'MemberEditForm') {
      this.getInfo();
    }

    this.getConstants();
    this.getRegions(1, (regions) => {
      let provinceList = [];
      provinceList.push({
        text: '不限',
        value: 0,
        children: []
      });
      for (let i = 0; i < regions.length; i++) {
        provinceList.push({
          text: regions[i].region_name,
          value: regions[i].region_id,
          children: []
        })
      }
      this.provinceList = provinceList;
    });
  }
}
</script>

<style scoped>
  .user-avatar{
    height: 80px;
    width: 80px;
    border-radius: 40px;
  }
  .member-photo {
    height: 300px;
    width: 300px;
  }
</style>
